<!-- （张仕琪）【搜索页面的子路由】历史搜索页面 -->
<template>
    <h3 class="title">
        <van-icon name="clock-o" />
        历史记录
        <van-notice-bar color="#838B8B" background="#FFFFFF" mode="closeable">奶茶</van-notice-bar>
        
    </h3>

</template>

<script>


</script>

<style lang="scss" scoped>
.title {
    margin: 20px 10px;
}


$border-color: #e5e5e5;
$font-size-base: 12px;
$font-size-l: $font-size-base + 2;
$border-color: #e5e5e5;

@mixin flex-center($direction: row) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

.history {
    padding-bottom: 30px;
    background-color: #fff;

    &-title {
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        font-size: $font-size-l;
        font-weight: bold;
    }

    &-btn {
        @include flex-center();
        width: 80%;
        height: 40px;
        background: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin: 0 auto;
        color: #686868;

        .iconfont {
            margin-right: 5px;
        }
    }
}

.g-list {
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    margin-bottom: 20px;
}

.list {

    &-enter-active,
    &-leave-active {
        transition: height 0.1s;
    }

    &-enter,
    &-leave-to {
        height: 0;
    }
}
</style>